import React from 'react';
import { RangeDateC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';
import { Form } from 'antd';
import moment from 'moment';

class RangeDateCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      start1: undefined,
      end1: undefined,
      hasDataBD1: undefined,
      hasDataED1: undefined,
    };
    this.formRef = React.createRef();
    setTimeout(() => {
      this.setState({
        start1: moment('2020-01-01'),
        end1: moment('2020-03-01'),
        hasDataBD1: moment('2019-01-01'),
        hasDataED1: moment('2020-09-30'),
      });
    }, 2000);
  }

  changeDate = () => {
    // 更改日期显示
    this.RangeDateCRef.setDate([moment('2015-05-01'), moment('2016-11-12')]);
    // 更改可选范围
    this.setState({
      hasDataBD1: moment('2015-01-01'),
      hasDataED1: moment('2016-12-31'),
    });
  };

  reset = () => {
    this.formRef.current.resetFields(); // 重置条件
    this.RangeDateCRef.reset();
  };

  // setref = (ref) => {
  //   this.setState({ RangeDateC: ref }, () => {
  //     console.log('wo', this.RangeDateC);
  //   });
  // };

  change = () => {
    this.RangeDateCRef.setDate([moment('2020-01-01'), moment('2020-05-01')]);
  };

  render() {
    return (
      <Form ref={this.formRef} style={{ padding: '20px', width: '800px' }}>
        <FirstHeaderC title='时间区间组件' />
        <SecondHeaderC title='基本场景' />
        <RangeDateC
          form={this.formRef.current}
          title='日期区间' // 显示名称
          dataIndex={['start1', 'end1']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[moment('2020-06-01'), moment('2020-10-01')]}
          onRef={(ref) => (this.RangeDateCRef = ref)}
        />
        <PrimaryC title='重置' onClick={this.reset} />
        <PrimaryC title='修改' onClick={this.change} />
        <SecondHeaderC title='有初始化值(2018-12-31 至 2020-07-30)' />
        <RangeDateC
          form={this.formRef.current}
          title='日期区间' // 显示名称
          dataIndex={['start2', 'end2']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[moment('2018-12-31'), moment('2020-07-30')]}
        />
        <SecondHeaderC title='有范围可选范围限制(2023-06-01 至 2023-07-30)' />
        <RangeDateC
          form={this.formRef.current}
          title='日期区间' // 显示名称
          dataIndex={['start3', 'end3']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          hasDataBD={moment('2023-06-01')} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null
          hasDataED={moment('2023-07-30')}
          allowClear={true}
          // rules={{ beginDate: [{ required: true, message: '请选择beginDate' }], endDate: [{ required: true, message: '请选择endDate' }] }}
        />
        <SecondHeaderC title='仅能设置从今天往后的日期' />
        <RangeDateC
          form={this.formRef.current}
          title='日期区间' // 显示名称
          dataIndex={['start4', 'end4']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          hasDataBD={moment().add(1, 'day')}
          disableFuture={false}
        />
        <SecondHeaderC title='设置选择某月之前的月份' />
        <RangeDateC
          form={this.formRef.current}
          title='月份区间' // 显示名称
          dataType='month'
          dataIndex={['start5', 'end5']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[moment('2022-03-05'), moment('2023-01-01')]}
          hasDataED={moment('2023-03-05')}
          required={true}
          message={'选择日期进行后续操作'}
          allowClear={true}
        />
        {/* <SecondHeaderC title='异步加载初始化值和可选范围，更改时间范围，更改可选范围' />
        <div>
          {`
                start1: moment('2020-01-01'),
                end1: moment('2020-03-01'),
                hasDataBD1: moment('2019-01-01'),
                hasDataED1: moment('2020-09-30')
                `}
        </div> */}
        {/* <RangeDateC
          form={this.formRef}
          title='日期区间' // 显示名称
          dataIndex={['start6', 'end6']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[this.state.start1, this.state.end1]}
          hasDataBD={this.state.hasDataBD1} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null
          hasDataED={this.state.hasDataED1}
          onRef={(ref) => (this.RangeDateCRef = ref)}
        />
        <PrimaryC title='点击更改' style={{ margin: '10px' }} onClick={this.changeDate} /> */}
        {/* <div>
          {`// 更改日期显示
                this.state.RangeDateC.setDate([momont('2015-05-01'), momont('2016-11-12')]);
                // 更改可选范围moment('2015-01-01')  moment('2016-12-31')`}
        </div> */}
      </Form>
    );
  }
}

export default RangeDateCDemo;
